<template>
  <div
    class="cdnSelect"
    ref="cdnSelect"
  >
    <el-row>
      <CdnInput
        :readonly="true"
        unselectable="on"
        class="input"
        v-model="text"
        @click.prevent="toggle = !toggle"
        @blur="blur"
      />
      <span class="icon">▾</span>
    </el-row>
    <el-row v-show="toggle">
      <ul class="ul">
        <li
          v-for="(o) of options"
          :key="o[key]"
          @click.prevent="select($event, o)"
        >{{ o[value] }}</li>
      </ul>
    </el-row>
  </div>
</template>

<script setup>
import CdnInput from '@/views/stagePower/CdnInput';
import { nextTick, onMounted, ref, watch } from 'vue';
const emit = defineEmits(['update:modelValue'])
const toggle = ref(false);

const text = ref('');

let lis = null;
const prop = defineProps({
  options: {
    type: Array,
    default: []
  },
  model: {
    type: Object,
    default: { key: 'key', value: 'value' }
  },
  modelValue: {
    type: String,
  }
});


const key = prop.model.key;
const value = prop.model.value;
watch(() => [prop.modelValue, prop.options], (cur) => {

  nextTick(() => {
    lis = cdnSelect.value.querySelector('.ul').children;
    if (lis == null || lis.length == 0) return text.value = '';

    for (let li of lis) li.className = ''; // 清除样式

    if (cur[0] == null) {
      text.value = '';
    } else {
      const options = cur[1];
      if (options.length == 0) return;

      let count = 0;
      for (let option of options) {
        if (option[key] == cur[0]) {
          text.value = option[value];
          lis[count].className = 'checked';
          break;
        } else {
          count++;
        }
      }
    }
  })
}, {immediate: true})

const cdnSelect = ref();
const blur = () => {
  setTimeout(() => {
    toggle.value = false;
  }, 200)
}
const select = (e, b) => {
  toggle.value = true;

  if (lis == null) return;
  for (let li of lis) li.className = ''; // 清除样式
  if (e) e.target.className = 'checked'; // 添加选中样式

  // 选中key - value值
  text.value = b[value];
  emit('update:modelValue', b[key]);
  toggle.value = false;
}

onMounted(() => {
  lis = cdnSelect.value.querySelector('.ul').children;
})

</script>

<style lang="scss" scoped>
.cdnSelect {
  width: 150px;
  .ul {
    overflow: auto;
    position: absolute;
    max-height: 200px;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #fefefd;
    border: solid 1px #e3e3e3;
    z-index: 9999;
    border-radius: 4px;
    box-shadow: 1px 1px 8px rgba(20%, 20%, 40%, 0.3);
    & > li {
      display: block;
      box-sizing: border-box;
      padding: 6px 3px 6px 3px;
      white-space: nowrap;
      position: relative;
      height: 30px;
      cursor: default;
    }
    & > li:hover {
      background-color: #d8edee;
    }
    .checked {
      background-color: #d8edee;
    }
  }
  .input {
    cursor: default;
  }
  .icon {
    height: 32px;
    position: absolute;
    right: 2px;
    top: 2px;
    width: 20px;
    background-color: #fff;
    z-index: 2;
    text-align: center;
    line-height: 32px;
    color: #a7a7a7;
    cursor: pointer;
    &:hover {
      color: #333;
    }
  }
}
</style>